import React from 'react';
import { Text, View, ScrollView, ImageBackground, SafeAreaView, Dimensions, StatusBar } from 'react-native';
import { WhiteSpace, WingBlank, Flex, Button, Drawer, List, Popover } from '@ant-design/react-native';
import styles from './styles';
import { Ionicons, Entypo } from '@expo/vector-icons';
import bg from '../../../assets/bg.jpeg';

const screenWidth = Dimensions.get('screen').width;

export default function Nav({ navigation }) {
  const [popoverState, setPopoverState] = React.useState([]);
  const [test, setTest] = React.useState('');

  const buildArray = (len) => {
// Array(5) gives you an array with length 5 but no values, hence you can't iterate over it.
// Array.apply(null, Array(5)).map(function () {}) gives you an array with length 5 and undefined as values, now it can be iterated over.
// Array.apply(null, Array(5)).map(function (x, i) { return i; }) gives you an array with length 5 and values 0,1,2,3,4.
// Array(5).forEach(alert) does nothing, Array.apply(null, Array(5)).forEach(alert) gives you 5 alerts
// ES6 gives us Array.from so now you can also use Array.from(Array(5)).forEach(alert)
// If you want to initialize with a certain value, these are good to knows...
// Array.from('abcde'), Array.from('x'.repeat(5))
// or Array.from({length: 5}, (v, i) => i)   // gives [0, 1, 2, 3, 4]
    return Array.from(Array(len));
  }
  const listItems = () => {
    const arr = buildArray(20);
    return arr.map((item, index) => {
      console.log('111111', `ITEM - ${index}`);
      return (
        <View key={`key${index}`} style={styles.itemContainer}><Text>{`ITEM - ${index}`}</Text></View>
      )
    });
  }
  const content1 = () => (
    <ScrollView style={styles.cnbContainer} contentInsetAdjustmentBehavior="automatic">
      <ImageBackground source={bg} style={styles.cnbBgImage} />
      <SafeAreaView>
        {listItems()}
      </SafeAreaView>
    </ScrollView>
  );
  /**
   * ScrollView 在最外层，内嵌套SafeAreaView。默认情况下会导致ScrollView滚动性能异常，需要contentInsetAdjustmentBehavior="automatic"
   * 但是这种情况下ImageBackground就会受到SafeAreaView的影响，在iPhoneX在异形部分出现空白（背景图片不能覆盖屏幕顶部）
   * 
   * ScrollView在最外层，内嵌套SafeAreaView。默认情况下会导致ScrollView滚动性能异常（模拟器），但是在iPhone 11 Pro Max上跑没有这个问题，是设备性能太强了？
   */

  const STYLES = ['default', 'dark-content', 'light-content'];
  const TRANSITIONS = ['fade', 'slide', 'none'];

  const content2 = () => (
    <ScrollView style={styles.cnbContainer} >
      <StatusBar
        animated={true}
        backgroundColor="#61dafb"
        barStyle={STYLES[2]}
        showHideTransition={TRANSITIONS[1]}
      />
      <ImageBackground source={bg} style={styles.cnbBgImage}/>
      <SafeAreaView/>
      {listItems()}
    </ScrollView>
  );

  const content3 = () => (
    <ImageBackground
      source={bg}
      style={{
        height: null,
        width: screenWidth.width,
        resizeMode: "cover",
        overflow: "hidden",
        flex: 1
      }}>
      <SafeAreaView style={{ opacity: 0 }} />
      <ScrollView>
        <View style={{ flex: 1 }}>
      {listItems()}
      </View>
      </ScrollView>
      
      <SafeAreaView style={{ opacity: 0 }} />
    </ImageBackground>
  );

  return (
    content2()
  );
};
